<template>
    <div class='detailsbottom'>
        <div class='detailsdiv'>
            <div class='detailsimg'><img src='../../assets/img/shoppingBottom/1.png'></div>
            <span>客服</span>
        </div>
        <div class='detailsdiv'>
            <div class='detailsimg'><img src='../../assets/img/shoppingBottom/2.png'></div>
            <span>店铺</span>
        </div>
        <div class='detailsdiv'>
            <div class='detailsimg'><img src='../../assets/img/shoppingBottom/3.png'></div>
            <span>收藏</span>
        </div>
        <div class='shopping' @click="shopping">加入购物车</div>
        <div class='buy'>购买</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            goods:0
        }
    },
    props:{
        good:{
            type:Object
        },
        detailsGoods:{
            type:Object
        }
    },
    // created(){
    //      this.$bus.$on('shopping',(good)=>{
    //          console.log(good);
    //             this.goods=good;
    //              console.log(this.goods);
    //         })
    //         console.log(this.goods)
    // },
    methods:{
        shopping(){
            let obj = {
                good:this.good,
                parm:this.$route.params.pops,
                index:this.$route.params.index,
                detailsGoods:this.detailsGoods
            }
           this.$store.commit('shopping',obj)
           
        }
    }
}
</script>

<style scoped>
    .detailsbottom{
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        height: 49px;
        z-index: 999;
        background-color: #fff;
        text-align: center; 
        
        /* justify-content: center; */
    } 
    .detailsimg{
        margin-bottom: 4px;
    }
    .detailsbottom div{
        /* flex: 1; */
        display: flex;
        flex-direction: column;
        /* text-align: center;
        justify-content: center; */
    }
    .detailsbottom div img{
        width: 24px;
        margin: 0 auto;
        vertical-align: middle;
    }
    .shopping{
        flex: 30%;
        line-height: 49px;
        background-color: #ffff00;
    }
    .buy{
        flex: 25%;
        line-height: 49px;
        background-color: #f0068f;
    }
    .detailsdiv{
        
        flex: 15%;
    }
</style>